<template>
  <view v-if="goods_info.goods_name" class="goods_detail_container">
    <!-- 轮播图 -->
    <swiper v-bind:indicator-dots="true" v-bind:autoplay="true" v-bind:interval="3000" v-bind:duration="1000" v-bind:circular="true">
      <swiper-item v-for="(item, index) in goods_info.pics" v-bind:key="index">
        <image v-bind:src="item.pics_big" v-on:click="preview(index)"></image>
      </swiper-item>
    </swiper>
    
    <!-- 商品信息 -->
    <view class="goods-info-box">
      <view class="price">{{goods_info.goods_price}}</view>
      <view class="goods-info-body">
        <view class="goods-name">{{goods_info.goods_name}}</view>
        <!-- 收藏-->
        <view class="favi">
          <uni-icons type="star"></uni-icons>
          <text>收藏</text>
        </view>
      </view>
      <view class="yf">快递: 免运费</view>
    </view>   
     
    <rich-text v-bind:nodes="goods_info.goods_introduce"></rich-text>
    <!-- 商品导航组件区域 -->
    <view class="goods_nav">
      <!-- fill控制右侧按钮样式 -->
      <!-- options左侧按钮配置项 -->
      <!-- buttonGroup右侧按钮配置项 -->
      <!-- click左侧按钮点击事件处理函数 -->
      <!-- buttonClick右侧按钮点击事件处理函数 -->
      <uni-goods-nav v-bind:fill="true"  v-bind:options="options" v-bind:buttonGroup="buttonGroup"  v-on:click="onClick" v-on:buttonClick="buttonClick" />
    </view>
  </view>
</template>

<script> 
  import store from '@/store/store.js'
  import { mapState, mapMutations,mapGetters  } from 'vuex'  //不起作用
  export default {
    computed: {
      //将cart.js的cart数组引入当前页面: 导入辅助函数mapState,使用辅助函数mapState通过模块路径m_cart映射成员cart[]
      ...mapState('m_cart', []),
      ...mapGetters('m_cart', ['total'])
    },
    watch: {
      total: {
        // handler 属性用来定义侦听器的 function 处理函数
        handler(newVal){
          const findResult = this.options.find(x => x.text == '购物车');
          if(findResult){
            findResult.info = newVal;
            console.log('newVal:', newVal);
          }
        },
        //immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
        immediate: true
      }
    },
    data() {
      return {
        goods_info: {},
        options: [
          {
            icon: 'shop',
            text: '店铺'
          }, {
            icon: 'cart',
            text: '购物车',
            info: 0
          }
        ],
        buttonGroup: [
          {
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ],
        storyArray: []
      };
    },
    onLoad(options){
      const goods_id = options.goods_id;
      this.getGoodsDetail(goods_id); 
      this.storyArray = store._state.data.m_cart.cart;
    },
    
    methods: {
      //通过mapMutations将模块m_cart的方法映射到商品详情页面
      ...mapMutations('m_cart', ['addToCart']),
      async getGoodsDetail(goods_id){
        const res = await uni.$http.get('/api/public/v1/goods/detail', {'goods_id': goods_id });
        if(res.data.meta.status != 200){
          return uni.$showMessage('数据请求失败...');
        }
        console.log('res:', res);
        // /g表示全局替换
        res.data.message.goods_introduce = res.data.message.goods_introduce.replace('/<img /g', '<img style="display:block;" ').replace('webp /g', 'jpg');
        console.log('goods_introduce:', res.data.message.goods_introduce);
        this.goods_info = res.data.message;
      },
      
      //实现轮播图预览效果
      preview(index){
        uni.previewImage({
          current: index,
          urls: this.goods_info.pics.map(x => x.pics_big)
        })
      },
      
      onClick(event){
        console.log('event', event.content.text);
        if(event.content.text == '购物车'){
          uni.switchTab({
            url: '/pages/cart/cart'
          })
        }
      },
      buttonClick(event){
        if(event.content.text == '加入购物车'){
          // 每个商品的信息对象，都包含如下 6 个属性：
          //{goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state}
          const goods = {
            goods_id: this.goods_info.goods_id, 
            goods_name: this.goods_info.goods_name, 
            goods_price: this.goods_info.goods_price, 
            goods_count: 1, 
            goods_small_logo: this.goods_info.goods_small_logo, 
            goods_state: true
          }
          this.addToCart(goods);
        }
      }
    }
    
  }
</script>

<style lang="scss">
  swiper{
    height: 750rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .goods-info-box{
    padding: 10px;
    padding-right: 0;
    .price{
      color: #C00000;
      font-size: 18px;
      margin: 10px 0;
    }
    .goods-info-body{
      display: flex;
      justify-content: space-between;
      .goods-name{
        font-size: 13px;
        padding-right: 10px;
      }
      .favi{
        width: 120px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid #efefef;
        color: gray;
      }
    }
    .yf{
      margin: 10px 0;
      font-size: 12px;
      color: gray;
    }
    
    .goods_nav{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    }
    
    .goods_detail_container{
      // 给页面外层的容器，添加 50px 的内padding，
      // 防止页面内容被底部的商品导航组件遮盖
      padding-bottom: 50px;
    }
  }
  
</style>
